<!--
 * @Author: Kang
 * @Date: 2023-04-23 07:15:45
 * @Last Modified by: Kang
 * @LastEditTime: 2023-05-15 16:29:25
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>KKK的AR_Demo</title>
    <link rel="icon" href="/assets/kkk.ico" />
    <script src="/assets/js/aframe.io_releases_1.2.0_aframe.min.js"></script>
    <script src="/assets/js/unpkg.com_aframe-extras@6.1.1_dist_aframe-extras.loaders.min.js"></script>
    <script src="/assets/js/cdn.jsdelivr.net_gh_AR-js-org_AR.js@3.3.1_aframe_build_aframe-ar.js"></script>
    <!-- <script src="https://raw.githubusercontent.com/andreasplesch/aframe-billboard-component/master/dist/aframe-billboard-component.min.js"></script> -->
  </head>
  <body style="margin : 0px; overflow: hidden;">
    <div id="loading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 999;">
      <h1 id="loading-percentage" style="color: white; font-size: 2em;">场景加载中...</h1>
    </div>    
    <a-scene embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;">
      <script>
        (function () {
          const scene = document.querySelector("a-scene");
          const loading = document.getElementById("loading");

          scene.addEventListener("renderstart", function () {
            loading.style.display = "none";
          });
        })();


        AFRAME.registerComponent("loop-animation", {
          init: function () {
            this.el.addEventListener("animation-finished", () => {
              const mixerComponent = this.el.components["animation-mixer"];
              const mixer = mixerComponent.mixer;
              const action = mixer.clipAction(mixerComponent.data.clip);
              action.reset();
              action.play();
            });
          },
        });

        AFRAME.registerComponent("click-rotate", {
          init: function () {
            this.el.addEventListener("click", () => {
              const rotation = this.el.getAttribute("rotation");
              this.el.setAttribute("animation", {
                property: "rotation",
                to: `${rotation.x} ${rotation.y + 360} ${rotation.z}`,
                dur: 1000,
                easing: "linear",
              });
            });
          },
        });
      </script>
      <a-assets>
        <a-asset-item id="animated-model" src="./pubg.gltf"></a-asset-item>
      </a-assets>
      <a-marker preset="hiro">
        <a-entity
          gltf-model="./pubg.gltf"
          animation-mixer="clip: Armature|mixamo.com|Layer0; loop: once; timeScale: 1.5"
          position="0 1 0"
          scale="2 2 2"
          loop-animation
          billboard
          click-rotate
          class="clickable"
        ></a-entity>
      </a-marker>
      <a-entity
        camera
        cursor="rayOrigin: mouse"
        raycaster="objects: .clickable"
      ></a-entity>
    </a-scene>
  </body>
</html>
